<template>
  <div class="analysis-container">
    <h1>学情分析</h1>
    <div>
      <h2>答题统计</h2>
      <table>
        <thead>
          <tr>
            <th>题目</th>
            <th>答案</th>
            <th>学生答案</th>
            <th>是否正确</th>
            <th>答题时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(question, index) in questions" :key="index">
            <td>{{ question.text }}</td>
            <td>{{ question.answer }}</td>
            <td>{{ answers[index] }}</td>
            <td>{{ answers[index] === question.answer ? "正确" : "错误" }}</td>
            <td>{{ times[index] }} 秒</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        { text: "1 + 1 = ?", answer: "2" },
        { text: "2 + 2 = ?", answer: "4" },
      ],
      answers: ["2", "3"], // 示例学生答案
      times: [10, 20], // 示例答题时间
    };
  },
};
</script>

<style scoped>
.analysis-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}
</style>
